<template>
  <div class="Word">
    <div style="text-align: center;">
        <h3 style="margin:20px;">演示：动态填充数据到Word模板生成PDF文件的效果</h3>
		<div style="width:650px;margin: 0 auto; font-size:14px;">
			<p style="text-align: left;">
				演示内容：<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;本示例演示了调用FileMaker对象在客户端动态生成Word文件并自动另存为PDF到服务器上，却不在线打开文件的功能，模拟了直接在服务器端填充数据到Word模板生成PDF文件的效果。
			</p>
			<p style="text-align: left;">
				操作说明：<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;1. 点击“生成PDF文件”按钮，执行动态填充数据到荣誉证书模板“template.doc”的程序，生成一份PDF格式的荣誉证书文件。<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;2. 生成完毕后，即可在“FileMakerPDF/doc”目录下看到生成的PDF文件：zhengshu.pdf。
			</p>
		</div>	
        <input id="Button1" type="button" value="生成PDF文件" @click="ConvertFile()"/>
		<div id="progressBarContainer">
		  <div id="progressBar"></div>
		</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Word",
  data() {
    return {};
  },
  methods: {
    ConvertFile() {
			document.getElementById("Button1").disabled = true;
            //注意：CallFileMaker是pageoffice.js中封装好的方法，专门供调用FileMakerCtrl生成文件使用			
            CallFileMaker({
               //url：指向服务器端FileMakerCtrl生成文件的controller地址
                url: "/api/FileMakerPDF/FileMakerPDF",
                success: function () {
                    console.log("completed successfully.");
                    setProgress(100);
                },
                progress: function (pos) {
                    console.log("running "+pos+"%");
                    setProgress(pos);
                },
                error: function (msg) {
                    console.log("error occurred: "+msg);
                }
            });
        },
    setProgress(percent) {
			var progressBar = document.getElementById("progressBar");
			progressBar.style.width = percent + '%';
			progressBar.innerText = percent + '%';
		},
  },
  mounted: function () {
    //将vue中的方法赋值给window
    //注意：这里必须将setProgress()这个方法挂载到windows对象上，否则CallFileMaker中将没法调用此方法
    window.setProgress = this.setProgress;
  },
};
</script>
<style scoped>
h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
#progressBarContainer {
		  width: 500px;
		  background-color: #e0e0e0;
		  border-radius: 5px;
		  padding: 3px;
		  margin: 10px auto;
		}

		#progressBar {
		  height: 20px;
		  width: 0%;
		  background-color: #76b900;
		  border-radius: 5px;
		  text-align: center;
		  line-height: 20px; /* 使文字垂直居中 */
		  color: white;
		}
</style>